<template>

    <sosuo></sosuo>
    <lubo :image="image"></lubo>
  
    <!-- 骨架屏 -->
    <van-skeleton v-for="item in qq" title :row="6" />
        <!-- 宫格 -->
    <van-grid :column-num="4">
        <van-grid-item v-for="item in ww"  :icon="item.image_src" :text="item.name" />
         <van-grid-item v-for="item in ww"  :icon="item.image_src" :text="item.name" />
    </van-grid>
</template>

<script setup>
import sosuo from '@/components/sosuo.vue';
import lubo from '@/components/lubo.vue';
import { ref } from 'vue';
import{catitemsApi} from '@/api/api'
const image = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];
let qq=ref(true)
let ww=ref([])

catitemsApi().then((res)=>{
    console.log(res);
    ww.value=res.data.message
    if(ww.value.length>0){
        qq.value=false
    }
    
})

</script>

<style lang="scss" scoped></style>